<template>
  <div class v-dialogDrag>
    <el-dialog
      custom-class="small-padding-dialog el-common-dialog"
      :close-on-click-modal="false"
      title="异常登记"
      :visible.sync="dialogVisible"
      width="70%"
      @close="handleClosed"
      :append-to-body="true"
    >
      <BaseInfo :formData="listData" />
      <div class="card-title full info-subtitle">异常登记</div>
      <el-form class="form-wrap basic-from-abnormal" style="padding-top:0px;">
        <el-form-item label="属地分局" prop="earthlyBranch">
          <el-input v-model="listData.earthlyBranch" readonly disabled />
        </el-form-item>
        <el-form-item label="属地派出所" prop="dependencyPoliceStation">
          <el-input v-model="listData.dependencyPoliceStation" readonly disabled />
        </el-form-item>
        <el-form-item label="责任所领导" prop="leadByResponsibility">
          <el-input v-model="listData.leadByResponsibility" readonly disabled />
        </el-form-item>
        <el-form-item label="责任所民警" prop="leadByPolice">
          <el-input v-model="listData.leadByPolice" readonly disabled />
        </el-form-item>
      </el-form>
      <el-form
        :model="formData"
        class="form-wrap basic-from-abnormal"
        ref="form"
        style="padding-top:0px;"
        :rules="rules"
      >
        <el-form-item label="表现异常情况" prop="exceptionTypes" class="full">
          <el-checkbox-group v-model="formData.exceptionTypes" :disabled="isPreview">
            <el-checkbox
              v-for="item in  abnormalList"
              :label="item.value"
              :key="item.value"
            >{{item.label}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item
          label="其他异常"
          prop="exceptionOther"
          class="full"
          v-show="formData.exceptionTypes.includes('7')"
        >
          <el-input
            placeholder="其他异常"
            type="textarea"
            v-model="formData.exceptionOther"
            clearable
            :disabled="isPreview"
          />
        </el-form-item>
        <el-form-item label="异常处置措施" prop="exceptionHandlingMeasures" class="full">
          <el-input
            placeholder="异常处置措施"
            type="textarea"
            v-model="formData.exceptionHandlingMeasures"
            clearable
            :disabled="isPreview"
          />
        </el-form-item>
        <el-form-item label="是否可控" prop="isSteerable" class="full">
          <el-radio-group v-model="formData.isSteerable" :disabled="isPreview">
            <el-radio v-for="item in yesorno" :label="item.value" :key="item.value">{{item.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" v-show="!isPreview" v-throttle="[save]">提交</el-button>
        <el-button @click="dialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
/**
 *  @param {string} label   // 表单名称
 *  @param {string} value   // 表单值
 *  @param {string} key   // 表单key值
 * @param {string} footerState   // 底部操作按钮  `
 *  @param {string} type   // 组件类型 input 输入框 select 下拉框  redio 单选框 time 时间  textarea 多文本输入框
 *  @param {Array} options   // 组件类型 select redio 数据
 */
import { getDict } from "@/utils";
import {
  addAbnormal,
  getAbnormal,
} from "@/views/yq-personnel/api/abnormalScreening.js";
import BaseInfo from "@/views/yq-personnel/baseInfo/index.vue";
export default {
  name: "overduDialog",
  components: {
    BaseInfo,
  },
  props: {
    // form表单数据
    title: {
      type: String,
      default: "查看",
    },
    width: {
      type: String,
      default: "50%",
    },
    footerState: {
      type: Boolean,
      default: true,
    },
    type: {
      type: String,
      default: "add",
    },
  },
  data() {
    return {
      //弹窗开关
      dialogVisible: false,
      isPreview: false,
      // 表单项
      formData: {
        exceptionTypes: [],
        exceptionHandlingMeasures: "",
        isSteerable: "1",
      },
      listData: {},
      abnormalList: [],
      yesorno: [],
      // 校验
      rules: {
        exceptionTypes: [
          { required: true, message: "请选择表现异常状态", trigger: "blur" },
        ],
        isSteerable: [
          { required: true, message: "请选择是否可控", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    this._getDict();
  },
  methods: {
    _getDict() {
      this.abnormalList = getDict("exception_type");
      this.yesorno = getDict("yesorno");
    },

    // 更改弹窗状态
    async changeVisible({ type, row }) {
      this.dialogVisible = !this.dialogVisible;
      this.listData = Object.assign({}, row);
      this.formData.personId = row.personId;
      getAbnormal(row.personId).then((res) => {
        if (res.data.data) {
          // 编辑
          let temp = res.data.data;
          for (const key in temp) {
            if (Object.hasOwnProperty.call(temp, key) && temp[key]) {
              temp[key] = temp[key].toString();
            }
          }
          this.formData = Object.assign(this.formData, temp);
          this.formData.exceptionTypes = temp.exceptionTypes.split(",");
        }
      });
      /*
       */
      if (type == "add") {
        this.isPreview = false;
        //登记有对应数据就回显数据，没有就新增
      } else {
        // 这个就是查看
        this.isPreview = true;
      }
    },
    // 提交新增
    async save() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          // 提交隔离逾期数据
          let msg = "新增";
          if (this.formData.abnormalScreeningId) {
            // 如果没有选中其他，则把其他异常置空
            !this.formData.exceptionTypes.includes("7") &&
              (this.formData.exception_other = "");
            msg = "编辑";
          }
          this.formData.exceptionTypes = this.formData.exceptionTypes.join(",");
          addAbnormal(this.formData).then((res) => {
            if (res.status == 200) {
              this.$message.success(`异常排查${msg}成功`);
              this.$emit("submit");
            }
          });

          this.dialogVisible = false;
        }
      });
    },
    // 弹窗关闭还原
    handleClosed() {
      this.formData = {
        exceptionTypes: [],
        exceptionHandlingMeasures: "",
        isSteerable: "1",
        exception_other: "",
      };
      this.dialogVisible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.addDialog {
  /deep/ .el-date-editor--datetime {
    width: 100%;
  }
  .album {
    .el-col {
      margin-bottom: 20px;
    }
    .img {
      width: 100%;
      height: 200px;
    }
  }
}
.basic-from-abnormal {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(4, 1fr);
  .full {
    grid-column: 1/5;
  }
}
</style>
